<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3426219_2jm2jdb7nk6.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3417935_2ocohmhi1nl.css">
    <link rel="stylesheet" href="../css/header-footer.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>

<style>

</style>

<body>

    <div class="topbar">
        <div class="topbar-container w">
            <ul class="topbar-nav">
                <li><a href="">小米商城</a><span>|</span></li>
                <li><a href="">MIUI</a><span>|</span></li>
                <li><a href="">loT</a><span>|</span></li>
                <li><a href="">云服务</a><span>|</span></li>
                <li><a href="">天星数科</a><span>|</span></li>
                <li><a href="">有品</a><span>|</span></li>
                <li><a href="">小爱开放平台</a><span>|</span></li>
                <li><a href="">企业团购</a><span>|</span></li>
                <li><a href="">资质证照</a><span>|</span></li>
                <li><a href="">协议规则</a><span>|</span></li>
                <li class="topbar-download">
                    <a href="">下载app</a>
                    <span>|</span>
                    <span class="appcode">
                        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
                        <i style="color: #000;">小米商城APP</i>
                    </span>
                </li>
                <li><a href="">Select Location</a></li>
            </ul>
            <div class="topbar-right">
                <ul class="topbar-login-reg">
                    <ul class="topbar-login-reg topbar-login-reg-on">
                        <li><a href="../html/Xiaomi_login.html">登录</a><span>|</span></li>
                        <li><a href="../html/Xiaomi_reg.html">注册</a><span>|</span></li>
                        <li><a href="">消息通知</a></li>
                    </ul>
                    <ul class="topbar-login-reg personal-center">
                        <li class="user-id"><a href="../html/Xiaomi_person.html"></a></li>
                        <li class="exit"><a>退出帐号</a></li>
                    </ul>
                </ul>
                <div class="cart"><i class="iconfont icon-xiazai1"></i>购物车<span>(0)</span>
                    <div class="cart-list">购物车空空如也</div>
                </div>

            </div>
        </div>
    </div>

    <header>
        <div class="header-container w">
            <h1><a href=""><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></a></h1>
            <ul class="header-nav">
                <li class="header-nav-one"><a href="">Xiaomi手机</a>
                    <div class="hide">
                        <ul class="hide-list">
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi 1S</h5>
                                    <strong>2299起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12 Pro</h5>
                                    <strong>4699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eec49ce46adcd4739e60a2b56062fc.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12</h5>
                                    <strong>3699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12X</h5>
                                    <strong>2999起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fea69fb5990da9dfc909aa8279aaea7e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 青春活力版</h5>
                                    <strong>1799起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi</h5>
                                    <strong>2299起</strong>
                                </a></li>
                        </ul>
                    </div>
                </li>

                <li class="header-nav-two"><a href="">Redmi红米</a>
                    <div class="hide">
                        <ul class="hide-list">
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi 1S</h5>
                                    <strong>2299起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12 Pro</h5>
                                    <strong>4699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eec49ce46adcd4739e60a2b56062fc.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12</h5>
                                    <strong>3699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12X</h5>
                                    <strong>2999起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fea69fb5990da9dfc909aa8279aaea7e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 青春活力版</h5>
                                    <strong>1799起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi</h5>
                                    <strong>2299起</strong>
                                </a></li>
                        </ul>
                    </div>
                </li>
                <li class="header-nav-three"><a href="">电视</a></li>
                <li class="header-nav-four"><a href="">笔记本</a></li>
                <li class="header-nav-five"><a href="">平板</a></li>
                <li class="header-nav-six"><a href="">家电</a></li>
                <li class="header-nav-seven"><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <div class="search">
                <input type="text" class="search-text">
                <div class="search-btn">
                    <i class="iconfont icon-fangdajing"></i>
                </div>
            </div>

        </div>


    </header>

    <div class="product-box">
        <div class="product-container w">
            <h2 class="product-left">xiaomi</h2>
            <ul class="product-right">
                <li><a href="">概述页</a></li>
                <li><a href="">参数页</a></li>
                <li><a href="">F码通道</a></li>
                <li><a href="">咨询客服</a></li>
                <li><a href="">用户评价</a></li>
            </ul>
        </div>
    </div>

    <div class="mi-detail">
        <div class="detail-container w">
            <div class="img-left">
                <!-- <div class="main-img">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680509.4879071.png" alt="">
                    <div class="shade"></div>
                </div>
                <ul class="select-img">
                    <li><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680509.4879071.png"
                            alt=""></li>

                    <li><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680509.4879071.png"
                            alt=""></li>
                </ul>

                <div class="magnify-img">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680509.4879071.png" alt="">
                </div> -->

            </div>

            <div class="product-right">
                <h2 class="product-title">mi</h2>
                <p class="product-des">
                    <font color="#ff4a00">
                        「618火热预售中！订金100元抵600元，预售到手价4199元起！尾款赠169元礼盒(伞+保温杯)，尾款享24期免息」
                    </font><span>全新一代 骁龙8 移动平台｜2K AMOLED 屏幕｜5000万超清三主摄 | CyberFocus 万物追焦｜全焦段夜景｜120W 澎湃秒充</span>
                </p>
                <h3>小米自营</h3>
                <div class="booking-info">
                    <div class="booking-left">
                        <h4>
                            <span>订金</span>
                            <span>￥<em>100</em></span>
                            <span class="tag">抵600元</span>
                        </h4>
                        <h5>
                            <span>预售价</span>
                            <span>￥<em>4699</em></span>
                        </h5>
                    </div>
                    <div class="booking-right">
                        <span>距结束</span>
                        <span class="booking-day"></span>天
                        <span class="booking-month">20</span>:
                        <span class="booking-min">20</span>:
                        <span class="booking-s">20</span>
                    </div>
                </div>
                <div class="address-box">
                    <div class="product-address">
                        <i class="iconfont icon-didian"></i>
                        <div class="address-con">
                            <h5>
                                <span>北京</span>
                                <span>北京市</span>
                                <span>海淀区</span>
                                <span>清河街道</span>
                                <a href="">修改</a>
                            </h5>
                            <p>
                                <span>现货预售</span>尾款支付后2日内发货
                            </p>
                        </div>
                    </div>
                </div>
                <div class="buy-option">
                    <div class="buy-title">选择版本</div>
                    <ul class="clearfix">
                        <!-- <li class="clearfix-on"><a>12GB+256GB</a></li>
                        <li><a>8GB+128GB</a></li>
                        <li><a>8GB+256GB</a></li> -->
                    </ul>
                    <div class="buy-title">选择颜色</div>
                    <ul class="clearfix">
                        <li class="clearfix-on"><a>黑色</a></li>
                        <li><a>蓝色</a></li>
                        <li><a>紫色</a></li>
                        <li><a>原野绿</a></li>
                    </ul>

                    <div class="selected-list">
                        <p>
                            <!-- <span>Xiaomi 12 Pro 12GB+256GB 黑色</span>
                            <span>5399元</span> -->
                        </p>
                        <h5>订金：100元</h5>
                    </div>

                    <div class="btn-box">
                        <div class="sala-btn"><a>加入购物车</a></div>

                        <div class="fav-btn">
                            <a><i class="iconfont icon-aixin1"></i> 去购物车</a>
                        </div>
                    </div>

                    <ul class="after-safe-info">
                        <li>
                            <em class="iconfont icon-kongxinduigou"></em>
                            <span>小米自营</span>
                        </li>
                        <li>
                            <em class="iconfont icon-kongxinduigou"></em>
                            <span>小米发货</span>
                        </li>
                        <li>
                            <em class="iconfont icon-kongxinduigou"></em>
                            <span>15天无理由退货</span>
                        </li>
                        <li>
                            <em class="iconfont icon-kongxinduigou"></em>
                            <span>运费说明</span>
                        </li>
                        <li>
                            <em class="iconfont icon-kongxinduigou"></em>
                            <span>企业信息</span>
                        </li>
                        <li>
                            <em class="iconfont icon-kongxinduigou"></em>
                            <span>7天价格保护</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="booking-rules-box w">
            <div class="booking-rules-box-title">
                <span>预售流程</span>
                <em>?</em>
            </div>
            <ul class="booking-rules-box-ca">
                <li>
                    <span class="iconfont icon-yinhangqia"></span>
                    <div>
                        <h5>1.支付预付款</h5>
                        <p>2022年05月23日 20:00- 2022年05月31日 19:59</p>
                    </div>
                </li>
                <li>
                    <span class="iconfont icon-yinhangqia"></span>
                    <div>
                        <h5>2.支付尾款</h5>
                        <p>2022年05月31日 20:00- 2022年06月03日 23:59</p>
                    </div>
                </li>
                <li>
                    <span class="iconfont icon-yinhangqia"></span>
                    <div>
                        <h5>3.商品发货</h5>
                        <p>尾款支付后2日内发货</p>
                    </div>
                </li>
            </ul>

        </div>
    </div>

    <div class="product-det">
        <div class="det-box w">
            <h3>价格说明</h3>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43e2954feb6d1b108438481f1d5b0bd3.png" alt="">
        </div>
    </div>


    <div class="footer">
        <div class="footer-container w">
            <ul class="footer-service">
                <li>
                    <a href="">
                        <i class="iconfont icon-weixiubanshou"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-7tiantuihuanhuo"></i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-tian"></i>
                        <span>15天免费换货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-liwuhuodong"></i>
                        <span>满69元包邮</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-didian"></i>
                        <span>520余家售后网点</span>
                    </a>
                </li>
            </ul>

            <div class="footerlinks">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd><a href="">售后政策</a></dd>
                    <dd><a href="">自助服务</a></dd>
                    <dd><a href="">相关下载</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店/专区</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd><a href="">了解小米</a></dd>
                    <dd><a href="">加入小米</a></dd>
                    <dd><a href="">投资者关系</a></dd>
                    <dd><a href="">企业社会责任</a></dd>
                    <dd><a href="">廉洁举报</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">官方微信</a></dd>
                    <dd><a href="">联系我们</a></dd>
                    <dd><a href="">公益基金会</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd><a href="">F码通道</a></dd>
                    <dd><a href="">礼物码</a></dd>
                    <dd><a href="">防伪查询</a></dd>
                </dl>
                <div class="col-contact">
                    <h3>400-100-5678</h3>
                    <p>8:00-18:00(仅收市话费)</p>
                    <a class="col-contact-service" href="">
                        <em class="iconfont icon-liuyan"></em>
                        <span>人工服务</span>
                    </a>
                    <h5><span>关注小米:</span>
                        <a href=""><i class="iconfont icon-xinlang"></i></a>
                        <a href=""><i class="iconfont icon-weixin"></i></a>
                    </h5>
                </div>
            </div>
        </div>
    </div>

    <div class="into">
        <div class="into-container w">
            <div class="into-logo">
                <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
            </div>
            <div class="into-text">
                <h5>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 |
                    问题反馈 | Select Location</h5>
                <h5>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</h5>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
                <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                <p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
                <p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <div class="into-links">
                    <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                    <img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
                    <img src="https://xyt.xinchacha.com/img/icon/icon3.png" alt="">
                    <img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1e68ce1fd7b9088931ef06942f02c99d.png"
                        alt="">
                </div>
            </div>

        </div>
        <div class="slogan w">让全球每个人都能享受科技带来的美好生活</div>
    </div>


    <script src="../js/promise_ajax.js"></script>
    <script>








        const oNoLogin = document.querySelector('.topbar-login-reg-on');
        const oLogin = document.querySelector('.personal-center');
        const oUesrId = document.querySelector('.user-id a');
        const oExit = document.querySelector('.exit');
        // console.log(oExit);

        let login_res = localStorage.getItem('xiaomi_xiaomi_');
        // console.log(login_res);
        if (login_res) {
            oLogin.style.display = 'flex';
            oNoLogin.style.display = 'none';
            oUesrId.innerHTML = login_res;
        }
        else {
            oNoLogin.style.display = 'flex';
            oLogin.style.display = 'none';
            const url = location;
            // location.href = '.Xiaomi_login.html';
            location.href = 'Xiaomi_login.html?accURL=' + url;
        }


        //退出
        oExit.onclick = function () {

            location.href = './Xiaomi_index.html';
            localStorage.removeItem('xiaomi_xiaomi_');
        }


        //放大镜
        const oLeftBox = document.querySelector('.img-left');

        const oClearfix = document.querySelector('.clearfix');
        // let res = localStorage.getItem('xiaomi_xiaomi_');

        const oPh = document.querySelector('.product-left');

        const oPt = document.querySelector('.product-title');

        const oPr = document.querySelector('.booking-left h5 em');



        //解构提取id
        const id = queryString('id');
        // console.log(id);



        //渲染
        detail_list({ id }).then(res => {
            const { list } = res;
            // console.log(list);
            const {
                goods_des,
                goods_img,
                goods_price,
                goods_title,
                goods_id,
                goods_type
            } = list;

            oPh.innerHTML = `${goods_title}`;
            oPt.innerHTML = `${goods_title}`;
            oPr.innerHTML = `${goods_price}`;

            let typeArr = goods_type.split(',');
            let typeLis = '';
            typeArr.forEach(v => {
                typeLis += `<li><a>${v}</a></li>`
            })

            let imgArr = goods_img.split(',');
            let Lis = '';
            imgArr.forEach(v => {
                Lis += `<li><img src="${v}"
                            alt=""></li>`
            })

            oLeftBox.innerHTML = `
                <div class="main-img">
                    <img src="${imgArr[0]}" alt="">
                    <div class="shade"></div>
                </div>
                <ul class="select-img">${Lis}
                </ul>

                <div class="magnify-img">
                    <img src="${imgArr[0]}" alt="">
                </div>`;

            oClearfix.innerHTML = `${typeLis}`;


            // const oSelectLis = document.querySelectorAll('.select-img li');
            // // console.log(oSelectLis);
            // oSelectLis.forEach(v => {
            //     v.onclick = function () {

            //     }
            // })


            const oLeft = document.querySelector('.main-img');
            const oLeftImg = document.querySelector('.main-img img');
            //遮罩层
            const oShadow = document.querySelector('.shade');
            // console.log(oLeft);
            const oRight = document.querySelector('.magnify-img');
            const oRightImg = document.querySelector('.magnify-img img');
            // console.log(oRightImg);

            const oBimgs = document.querySelector('.select-img');


            // 遮罩层移动的最大距离
            var maxX = oLeft.clientWidth - oShadow.offsetWidth;
            var maxY = oLeft.clientHeight - oShadow.offsetHeight;

            // console.log(maxX,maxY);
            //横放缩放比例
            var scaleW = (oRightImg.clientWidth - oRight.offsetWidth) / maxX;
            //纵向缩放比例  
            var scaleH = (oRightImg.clientHeight - oRight.offsetHeight) / maxY;




            oBimgs.addEventListener('mouseover', function (e) {
                if (e.target.tagName === 'IMG') {
                    oLeftImg.src = e.target.src;
                    oRightImg.src = e.target.src
                }
            })


            //鼠标移入
            oLeft.onmouseover = function (e) {
                //遮罩层显示
                oShadow.style.visibility = 'visible';
                //右边图片显示
                oRight.style.visibility = 'visible';
                // oRight.style.display = 'block';
                oRightImg.style.display = 'block';

                document.onmousemove = function (e) {

                    e = e || event;
                    var x = e.x - oLeft.offsetLeft - oShadow.offsetWidth / 2 - oLeftBox.offsetLeft;
                    var y = e.y - oLeftBox.offsetTop - oShadow.offsetHeight / 2 - oLeft.offsetTop;
                    // console.log(x, y);
                    if (x < 0) x = 0;
                    if (y < 0) y = 0;
                    if (x > maxX) x = maxX;
                    if (y > maxY) y = maxY;
                    oShadow.style.cssText += `left:${x}px;top:${y}px;`;
                    // 右边大图需要反方向移动
                    oRightImg.style.cssText += `left:${-x * scaleW}px;top:${-y * scaleH}px;`;
                }
            }

            //鼠标移出
            oLeft.onmouseout = function () {
                oLeftBox.onmousemove = null;
                // 遮罩层消失
                oShadow.style.visibility = 'hidden';
                // 右边图片不显示
                oRight.style.visibility = 'hidden';
            }

        })


        //倒计时
        showTime('a', new Date('2022-6-1 0:0:0'));
        var t = setInterval(showTime, 1000, 'a', new Date('2022-6-1 0:0:0'));
        function showTime(id, futureTime) {
            var oh = document.getElementById(id);
            //获取将来的时间
            var future = new Date(futureTime);
            //现在的时间
            var nowDate = new Date();
            //相减得到的时间是 毫秒，除以1000得到取整 秒
            var gap = parseInt((future - nowDate) / 1000);
            //当时间为零时，结束倒计时
            if (gap <= 0) {
                oh.innerHTML = '没了';
                clearInterval(t);
            }
            else {
                //取天数
                var d = parseInt(gap / 86400);
                //取小时
                var h = parseInt(gap % 86400 / 3600);
                //取分钟
                var m = parseInt(gap % 3600 / 60);
                m = (m < 10) ? '0' + m : m;
                //取秒
                var s = gap % 60;
                s = (s < 10) ? '0' + s : s;
                // oh.innerHTML = `距离五一放假还有：${d}天${h}时${m}分${s}秒`;
                document.querySelector('.booking-day').innerHTML = `${d}`;
                document.querySelector('.booking-month').innerHTML = `${h}`;
                document.querySelector('.booking-min').innerHTML = `${m}`;
                document.querySelector('.booking-s').innerHTML = `${s}`;
            }

        }


        //加入购物车
        const oSala_btn = document.querySelector('.sala-btn a');
        const oFav_btn = document.querySelector('.fav-btn');
        // console.log(oSala_btn, oFav_btn);
        oSala_btn.onclick = function () {
            oSala_btn.style.backgroundColor = '#ff6700';
            add_cart({
                userphone: login_res,
                id,
                num: 1,
            })
        }

        const oCart = document.querySelector('.cart');
        // //去购物车
        oFav_btn.onclick = function () {
            if (login_res) {
                location.href = 'Xiaomi_cart.html';
            }
            else {
                const url = location;
                // location.href = '.Xiaomi_login.html';
                location.href = 'Xiaomi_login.html?accURL=' + url;
            }
        }
        oCart.onclick = function () {
            if (login_res) {
                location.href = 'Xiaomi_cart.html';
            }
            else {
                const url = location;
                // location.href = '.Xiaomi_login.html';
                location.href = 'Xiaomi_login.html?accURL=' + url;
            }
        }



        //导航栏吸顶

        const oPb = document.querySelector('.product-box');
        // 拿到导航栏距离顶部的距离
        const oTop = oPb.offsetTop;

        document.body.onscroll = function () {
            // 拿到滚动的距离
            const scrollTop = document.documentElement.scrollTop;
            // console.log(scrollTop);

            if (scrollTop >= oTop) {
                oPb.classList.add('active');
            }
            else {
                oPb.classList.remove('active');
            }
        }
    </script>

</body>

</html>